<template>
  <section>
    <el-row style="color:red;font-size: 20px;font-weight: bold">
      已取消该定义，暂存勿用。
    </el-row>
    <el-row>
      <!--搜索、创建行-->
      <el-col :span="20">
        <el-form :inline="true" size="mini">
          <el-form-item label="查询部门类型" >
            <el-input placeholder="请输入" v-model="departmentType.name" @keydown.native.prevent.enter="searchDepartmentType"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle  @click="searchDepartmentType"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button style="margin-bottom: 20px;text-align: right" @click="creatDepartmentType">
          <icon name="plus"></icon>
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="departmentTypeList" style="width: 100%" size="small">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型编码">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.code"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.code}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="small" >DEL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </section>
</template>

<script>
  import {mapActions} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "departmentType",
    data(){
      return {
        departmentTypeList:[],
        departmentType: {
          name: '',
        },
      }
    },
    created(){
      this.loadDepartmentTypeList()
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      loadDepartmentTypeList(){
        this.fetch({name:"getDepartmentTypeList"})
          .then(res=>{
            if(res.errCode){
              this.$message({type:'error',message:res.errMsg})
            }else{
              this.departmentTypeList=res
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      searchDepartmentType(){
        console.log(this.departmentTypeList)
        let index = this.departmentTypeList.findIndex(i=>i.name == this.departmentType.name)
        console.log(index)
        console.log(this.departmentTypeList)
      },
      creatDepartmentType(){
        let tb = {name:'',code:'',edit:true}
        this.departmentTypeList.push(tb)
        console.log(this.departmentTypeList)
      },
      confirm(scope){
        console.log(scope)
        if(scope.row.edit && scope.row.edit === true){//目前是编辑状态
          //判断是否新创建
          if(scope.row.id){//非新建，有id，要更新
            this.updateDepartmentType(scope.row)
          }
          else {//新建的，有edit
            //保存新
            this.saveDepartmentType(scope.row)
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(scope.row.edit === undefined){
            Vue.set(scope.row,'edit',true)//后续添加属性，需要vue联动
          }else {
            scope.row.edit = true
          }
        }
      },
      updateDepartmentType(row){
        console.log(row)
        this.fetch({name:"updateDepartmentType",data:{...department,departmentTypeId:department.departmentType.id}})
          .then(res=>{
            if(res.errCode){
              console.log(res)
              this.$message({type:'error',message:res.errMsg})
            }else{
              console.log(res)
              row.edit = false
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      saveDepartmentType(row){
        this.fetch({name:"createDepartmentType",data:{name:row.name,code:row.code}})
          .then(res=>{
            if(res.errCode){
              console.log(res)
              this.$message({type:'error',message:res.errMsg})
            }else{
              console.log(res)
              row.edit = !row.edit
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      del(scope){
        console.log(scope)
        this.fetch({name:"deleteDepartmentType",data:{id:scope.row.id}})
          .then(res=>{
            if(res.errCode){
              console.log(res)
              this.$message({type:'error',message:res.errMsg})
            }else{
              let index = this.departmentTypeList.findIndex(i=>i.id === scope.row.id)
              this.departmentTypeList.splice(index,1)
              // this.loadDepartmentTypeList()
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      }
    }
  }
</script>

<style scoped>

</style>
